<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Travel Landing Page</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/09681efc7e.js" crossorigin="anonymous"></script>
</head>
<body>
    <section class="showcase">
        <header>
            <h2 class="logo">Travel</h2>
            <div class="toggle"></div>
        </header>

        <video src="beach.mp4" muted loop autoplay></video>

        <div class="overlay"></div>

        <div class="text">
            <h2>Never Stop</h2>
            <h3>Exploring The World</h3>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolores, temporibus officia. Facere soluta, obcaecati magni deleniti hic dicta similique aperiam.</p>
            <a href="#"> Explore</a>
            
        </div>

        <ul class="social">
            <li><a href="https://github.com/KristinaBorovskikh"><i class="fa-brands fa-github fa-3x"></i></a></li>
            <li><a href=""><i class="fa-brands fa-twitter fa-3x"></i></a> </li>
            <li> <a href=""><i class="fa-brands fa-facebook fa-3x"></i></a></li>
        </ul>
    </section>
     <div class="menu">
        <ul>
            <li> <a href="">Home</a></li>
            <li><a href="">News</a></li>
            <li><a href="">Destination</a></li>
            <li><a href="">Blog</a></li>
            <li><a href="">Contact</a></li>
        </ul>
     </div>

     <script>
        const menuToggle = document.querySelector('.toggle')
        const showcase = document.querySelector('.showcase')

        menuToggle.addEventListener('click',() => {
            menuToggle.classList.toggle('active')
            showcase.classList.toggle('active')
        })
     </script>
</body>
</html>